<template>
	<view class="wrap">
		<u--form :model="form" ref="uForm" :rules="rules" labelWidth="65">
			<div class="cell">
				<u-form-item label="收货人" prop="name" borderBottom>
					<u-input v-model="form.name" border="none" />
				</u-form-item>
				<u-form-item label="电话" prop="mobile" borderBottom>
					<u--input v-model="form.mobile" border="none"></u--input>
				</u-form-item>
			</div>
			
			<u-form-item label="地区" prop="addr" borderBottom @click="selectAddress">
				<u--input v-model="form.addr" disabled disabledColor="transparent" placeholder="请选择地区" border="none">
				</u--input>
			</u-form-item>
			<u-form-item label="详细地址" prop="detail" borderBottom>
				<u--textarea style="width: 300rpx" v-model="form.detail"></u--textarea>
			</u-form-item>
			<u-form-item label="是否默认" prop="isDefault" borderBottom>
				<u-switch v-model="form.isDefault"  activeColor="#3BC986"></u-switch>
			</u-form-item>
		</u--form>
		<u-button style="margin-top: 50rpx;" type="success" @click="submit">提交</u-button>
		<itmister-address-picker ref="addressEl" @confirmChange="confirmChange"></itmister-address-picker>
	</view>
</template>

<script>
	import itmisterAddressPicker from '@/components/itmister-address-picker/itmister-address-picker.nvue'
	export default {
		components: {
			itmisterAddressPicker
		},
		data() {
			return {
				form: {
					name: '',
					mobile: '',
					detail: '',
					addr: '',
					province: '',
					city: '',
					district: '',
					isDefault: false
				},
				rules: {
					name: [{
						required: true,
						message: '请输入姓名',
						trigger: ['blur', 'change']
					}],
					mobile: [{
							required: true,
							message: '请输入电话',
							trigger: ['blur', 'change']
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					addr: [{
						required: true,
						message: '请输入地区',
						trigger: ['blur', 'change']
					}],
					detail: [{
						required: true,
						message: '请输入详细地址',
						trigger: ['blur', 'change']
					}]
				}
			};
		},
		onLoad(options){
			if(options.addrObj){
				const data = JSON.parse(options.addrObj)
				this.form.id = data.id
				this.form.name = data.name
				this.form.mobile = data.mobile
				this.form.detail = data.detail
				this.form.province = data.province
				this.form.city = data.city
				this.form.district = data.district
				this.form.isDefault = data.isDefault==='1'?true:false
				this.form.addr = `${data.province}/${data.city}/${data.district}`
			}
		},
		methods: {
			submit() {
				this.$refs.uForm.validate().then(res => {
					uni.$u.toast('校验通过')
					const params = JSON.parse(JSON.stringify(this.form))
					delete params.addr
					params.isDefault = params.isDefault?'1':'0'
					this.$api.post('/address/edit',params).then(res=>{
						if(res.success){
							console.log(res)
							uni.navigateTo({
								url:'../addressList/addressList'
							})
						}
					})
					console.log(this.form)
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},
			// 打开窗口
			selectAddress() {
				this.$refs.addressEl.show();
			},
			// 确认选中
			confirmChange(address) {
				console.log(address)
				this.form.province = address.province
				this.form.city = address.city
				this.form.district = address.area
				this.form.addr = address.province + '/' + address.city + '/' + address.area;
			}
		},

	};
</script>
<style lang="scss" scoped>
	page {
		// background: #fff;
	}

	.wrap {
		box-sizing: border-box;
		padding: 20rpx 32rpx;
		.cell{
			background-color: #fff;
			border-radius: 16rpx;
			
		}
	}
</style>
